.container {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  padding-top: 20rpx;

  .sum {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30rpx;
    padding: 20rpx;
    border-radius: 20rpx;
    background: #fff;

    .time {
      color: #A9A9A9;
    }

    .category {
      display: flex;
      justify-content: space-around;
      width: 100%;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .top {
          display: flex;
          align-items: baseline;
          .num {
            color: rgba($color: #B92439, $alpha: 0.6);
            font-size: 80rpx;
          }
          .tips {
            margin-left: 10;
            color: #A9A9A9;
            font-size: 15rpx;
          }
        }

        .activity {
          color: #A9A9A9;
          font-size: 25rpx;
        }
      }
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    background: #f0f0f0;
    margin: auto 20rpx;

    .data {
      width: 270rpx;
      margin: 20rpx;
      padding: 20rpx;
      border-radius: 30rpx;
      background-color: #fff;

      .name {
        display: flex;
        align-items: flex-end;

        .nav-name {
          color: #A9A9A9;
          font-size: 17rpx;
        }

        .card-name {
          margin-left: 20rpx;
          font-size: 22rpx;
        }
      }

      .volume {
        .line {
          border: 1px solid rgba($color: #A9a9a9, $alpha: 0.5);
        }

        .diff {
          display: flex;
          align-items: flex-end;
          margin: 10rpx;
          margin-left: 0;

          .index {
            color: #A9A9A9;
            font-size: 17rpx;
          }

          .weight {
            margin-left: 15rpx;
            font-size: 22rpx;
          }
          .edit,
          .delete {
            width: 30rpx;
            height: 30rpx;
            margin-left: 20rpx;
          }
        }
      }
    }
  }

  .operate {
    display: flex;
    padding: 50rpx 20rpx;
    background-color: #f0f0f0;

    button {
      width: 150rpx;
      font-size: 25rpx;
    }

    .update {
      background: linear-gradient(to right, rgba(61, 184, 225, 0.8), rgba(63, 228, 149, 0.8));
      // background: #FFC824;
      // color: #6B400D;
    }

    .update-hover {
      background: #3cb7e0;
    }

    .commit {
      background: linear-gradient(to right, rgba(231, 108, 152, 0.8), rgba(231, 139, 116, 0.8));
      // background: #6B400D;
      // color: #FFC824;
    }

    .commit-hover {
      background: #E76C98;
    }
  }
  .edit-btn {
    display: flex;
    padding: 50rpx 20rpx;
    background-color: #f0f0f0;
    .add {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200rpx;
      font-size: 25rpx;
      border-color: #2FAFA2;
      color: #2FAFA2;
      image {
        width: 15px;
        height: 15px;
        margin-right: 20rpx;
      }
    }
    .over {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200rpx;
      border-color: #e46b08;
      color: #e46b08;
      font-size: 25rpx;
      image {
        width: 15px;
        height: 15px;
        margin-right: 20rpx;
      }
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #a9a9a9;
    margin-top: 200rpx;
    font-size: 50rpx;
    button {
      margin-top: 40rpx;
    }
  }
}